<template>
    <view class="warp">

        <view class="conter">
            <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
                <u-form-item label="" prop="userInfo.name" ref="item1">
                    <u--input v-model="model1.userInfo.name" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>
                <u-form-item label="" prop="userInfo.verification" ref="item1">
                    <u--input v-model="model1.userInfo.verification" border="none" placeholder="请输入验证码"></u--input>
                    <verification :name="model1.userInfo.name"></verification>
                </u-form-item> <u-form-item label="" prop="userInfo.password" ref="item1">
                    <u--input v-model="model1.userInfo.password" border="none" placeholder="请设置新密码(6-12位)"></u--input>
                </u-form-item>
                <button class="btn_login" @click="btn_login">确定</button>

            </u--form>
        </view>
    </view>
</template>

<script>
import { verification } from "../verification/verification_codes.vue"
import { get_forget } from "../../api/user"
export default {
    components: {
        verification: () => import("../verification/verification_codes.vue"),
    },
    data() {
        return {

            model1: {
                userInfo: {
                    name: '15518528086',
                    verification: '',
                    password: '',
                },
            },
            rules: {
                'userInfo.name': {
                    type: 'string',
                    required: true,
                    message: '请输入正确手机号',
                    trigger: ['blur', 'change'],
                    pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                },
                'userInfo.verification': {
                    type: 'string',
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur', 'change']
                },
                'userInfo.password': {
                    type: 'string',
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur', 'change']
                },
            }
        }
    },
    mounted() {

    },
    methods: {
        btn_login() {
            let { name, verification, password } = this.model1.userInfo
            console.log(name)
            if (!/^1[3-9]\d{9}$/.test(name)) {
                // this.$toast('手机号码格式错误');
                console.log("手机号码格式错误")
                return;
            }
            if (!/^\d{6}$/.test(verification)) {
                // this.$toast('验证码格式错误');
                console.log("验证码格式错误")
                return;
            }
            if (!/^\w{6,12}$/.test(password)) {
                // this.$toast('密码格式错误');
                console.log("密码格式错误")
                return;
            }
            get_forget({
                username: name,
                password: password,
                vercode: verification
            }).then((res) => {
                console.log(res)
            }).catch((err) => {

            });

        }
    },

}
</script>

<style lang="scss" scoped>
.warp {


    .conter {
        width: 85%;
        margin: 100px auto;

        .btn_login {
            width: 80%;
            height: 40px;
            margin: 15px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fdd100;
            color: #fff;
            border-radius: 25px;
        }

    }
}
</style>